<script setup lang="ts">
import { TriangleType } from "../scripts/tab";

const prop = defineProps({
    keyType: {
        type: Number
    }
});

function getType(arr: TriangleType[]) {
    return arr.some(item => item === prop.keyType);
}

function isActive() {
    const active = [TriangleType.UP, TriangleType.DOWN].some(item => item === prop.keyType);
    return active ? "active" : "";
}
</script>

<template>
    <p class="upDown" :class="isActive()">
        <VIcon v-show="getType([TriangleType.UP, TriangleType.NONE])">mdi mdi-triangle-small-up</VIcon>
        <VIcon v-show="getType([TriangleType.DOWN, TriangleType.NONE])">mdi mdi-triangle-small-down</VIcon>
    </p>
</template>

<style lang="less">
.upDown {
    width: 10px;
    margin-left: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    @wh: 3px;

    i {
        position: absolute;
        top: -@wh;
    }

    i:nth-child(2) {
        top: @wh;
    }
}

.active {
    color: var(--main);
}
</style>
